<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: lub_lenovo
  Date: 2017/8/7
  Time: 17:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>

<%@include file="/WEB-INF/jsp/public/header.jsp" %>
<%@include file="/WEB-INF/jsp/public/nav.jsp" %>

<style>
    .imgList{
        list-style: none;
        padding-left:0px;
        margin-top:10px;
        margin-bottom: 0px;
        overflow: hidden;
    }
    .imgList>li{
        position: relative;
        float:left;
        width:100px;
        height: 70px;
        margin-right:20px;
        border:1px solid cornflowerblue;
        overflow: hidden;
    }
    .imgList>li>img{
        max-width:100%;
    }
    .imgList>li>i{
        position: absolute;
        width:20px;
        height: 20px;
        border-radius:50%;
        text-align: center;
        line-height:20px;
        color:#fff;
        top:3px;
        right:3px;
        background:rgba(20,20,20,.6);
    }
</style>
<div class="container-fluid">
    <div class="row">
        <div class="left col-sm-2">
            <%@include file="/WEB-INF/jsp/public/menu.jsp" %>
        </div>
        <div class="right col-sm-10">
            <ol class="breadcrumb">
                <li><a href="#">首页</a></li>
                <li><a href="#">新增文章</a></li>
            </ol>
            <div class="panel panel-danger">
                <div class="panel-heading">
                    新增文章
                </div>
                <div class="panel-body">
                    <form class="form-horizontal" enctype="multipart/form-data" action="${pageContext.request.contextPath}/article/insertArticle.do" method="post">
                        <div class="form-group">
                            <label for="txtTitle" class="col-sm-2 control-label">标题</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" name="title" id="txtTitle" placeholder="标题">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="txtNav" class="col-sm-2 control-label">类别</label>
                            <div class="col-sm-4">
                                <select class="form-control" name="navid" id="txtNav">
                                    <%--<option value="1">新闻</option>--%>
                                    <c:forEach items="${nav}" var="n">
                                        <option value="${n.id}">${n.navname}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="txtThumb" class="col-sm-2 control-label">缩略图</label>
                            <div class="col-sm-10">
                                <a href="javascript:;" id="txtThumb" class="btn btn-primary">上传图片</a>
                                <input type="hidden" name="thumbs">
                                <ul class="imgList">
                                    <%--<li><img src="/upload/11.jpg" alt=""><i class="glyphicon glyphicon-remove" ></i></li>--%>
                                    <%--<li><img src="/upload/22.jpg" alt=""><i class="glyphicon glyphicon-remove" ></i></li>--%>
                                    <%--<li><img src="/upload/22.jpg" alt=""><i class="glyphicon glyphicon-remove" ></i></li>--%>
                                </ul>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="txtLayout" class="col-sm-2 control-label">列表布局</label>
                            <div class="col-sm-4">
                                <select class="form-control" name="layout" id="txtLayout">
                                    <option value="0">左边小图</option>
                                    <option value="1">一张大图</option>
                                    <option value="2">三张小图</option>
                                </select>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="txtFrom" class="col-sm-2 control-label">发布方</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" name="publisher" id="txtFrom" placeholder="发布方">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="txtContent" class="col-sm-2 control-label">文章内容</label>
                            <div class="col-sm-4">
                                <textarea class="form-control" name="content" id="txtContent" cols="30" rows="20"></textarea>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-offset-5 col-sm-4">
                                <button type="submit" class="btn btn-default">添加</button>
                            </div>
                        </div>
                    </form>
                    <%--<div class="alert alert-warning alert-dismissible" role="alert">--%>
                        <%--<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>--%>
                        <%--${msg}--%>
                    <%--</div>--%>
                </div>

            </div>
        </div>
    </div>
</div>

<script src="/kindeditor/kindeditor-all-min.js"></script>
<script src="/kindeditor/lang/zh-CN.js"></script>

<script>
    var options = {
        allowFileManager : true,
        uploadJson : '/article/upload.do',//后台文件上传处理的路径
        filePostName : 'file'//文件的字段名，一会看到后台代码时会解释怎么使用
    };
    //存储缩略图的url
    var imgArray = [];

    KindEditor.ready(function(K) {
        window.editor = K.create('textarea["content"]',options);
    });

    //上传按钮事件
    $('#txtThumb').click(function(){
        //打开图片上传窗口
        KindEditor.editor(options).loadPlugin('multiimage',function(){
            var editor = this;
            editor.plugin.multiImageDialog({
                clickFn : function(urlList) {
                    console.log(urlList);
                    //jquery Dom操作，将上传好的图片插入到Dom中
                    var html='';
                    urlList.forEach(function(item,index){
                        imgArray.push(item.url);
                        html+='<li><img src="'+item.url+'"><i data-index="'+index+'" class="glyphicon glyphicon-remove" onclick="articleAdd.removePic(this);" ></i></li>';
                    });
                    $('.imgList').append(html);
                    $('input[name=thumbs]').val(imgArray.join(','));
                    //关闭对话框
                    editor.hideDialog();
                }
            });
        });
    });


    articleAdd={
        //删除图片事件
        removePic:function(obj){
            var index=$(obj).data('index');
            $(obj).parent().remove();

            console.log(index);
            imgArray.splice(index,1);
            var html='';
            imgArray.forEach(function(item,index){
                html+='<li><img src="'+item+'"><i data-index="'+index+'" class="glyphicon glyphicon-remove" onclick="articleAdd.removePic(this);" ></i></li>';
            });
            $('.imgList').html(html);

            $('input[name=thumbs]').val(imgArray.join(','));
        }
    };



    $(function(){
//        $.post("/article/comments.do",function(data){
//            console.log(data);
//        })
    })

</script>

<%@include file="/WEB-INF/jsp/public/footer.jsp"%>
